<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('質押')}}</view>
			<view class="message iconfont icon-tongzhi" data-url="/pages/index/tidings" @click="gotopage">
				<view class="round" v-if="is_message_read==1"></view>
			</view>
			<picker @change="choiceLang" :value="langIndex" :range="Lang.lang('langData')" :range-key="'name'">
				<view class="language" v-if="lang == 'en'">EN</view>
				<view class="language" v-else>CN</view>
			</picker>
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="balance_box">
				<view class="balance_list">
					<view class="text">{{Lang.lang('餘額')}}：{{wallet_info.yydm}} YYDM</view>
					<view class="menu" data-url="/pages/personalcenter/recharge?type=1" @click="gotopage">{{Lang.lang('去充值')}}</view>
				</view>
				<view class="balance_list">
					<view class="title">{{Lang.lang('質押數量')}}</view>
					<!-- <view class="num">0.00YYDM</view> -->
					<input class="num" v-model="num" />
				</view>
			</view>

			<view class="balance_box">
				<view class="balance_list">
					<view class="title">{{Lang.lang('質押天數')}}</view>
					<!-- <view class="num">0天</view> -->
				</view>
				<view class="balance_list">
					<block v-for="(item, index) in pledge_sf_bl_all">
						<view class="time" :class="index == select ? 'timeColor' : ''" :data-index="index"
							@tap="setBoxTime">
							{{item.sf_day}} {{Lang.lang('天')}}
						</view>
					</block>
				</view>
			</view>

			<view class="confirm02" @tap="autoPupu">{{Lang.lang('立即質押')}}</view>

			<view class="page_title">
				<view class="title">{{Lang.lang('質押記錄')}}</view>
				<!-- <view class="arrow iconfont icon-xiangyou1"></view> -->
			</view>

			<view class="records_box">
				<block v-for="(item, index) in pledge_list" :key="index">
					<view class="records_list">
						<view class="list">
							<view class="title">
								<view class="i iconfont icon-zhiya"></view>
								<view class="t">
									<span v-if="item.state == 1">{{Lang.lang('質押中')}}</span>
									<span v-else-if="item.state == 2">{{Lang.lang('已完成')}}</span>
								</view>
							</view>
							<view class="time">{{item.add_time}}</view>
						</view>
						<view class="list">
							<view class="text">
								<view class="c">{{Lang.lang('質押數量')}}：{{item.pay_num}} YYDM</view>
								<view class="c">{{Lang.lang('質押天數')}}：{{item.release_day}} {{Lang.lang('天')}}</view>
								<view class="c">{{Lang.lang('已釋放天數')}}：{{item.already_release_yydz}} YYDZ</view>
							</view>
							<view class="menu" :data-url="'/pages/pledge/list?id='+item.id" @click="gotopage">{{Lang.lang('明細')}}</view>
						</view>
					</view>
				</block>
			</view>

		</view>

		<!-- 输入安全码 -->
		<view class="pupu_box" v-if="pupu" @tap="autoPupu">
			<view class="show_box" @tap.stop="">
				<view class="title">{{Lang.lang('請輸入交易密碼')}}</view>
				<view class="input">
					<input type="password" v-model="pay_password" :placeholder="Lang.lang('請輸入交易密碼')" />
				</view>
				<view class="menu_box">
					<view class="menu" @tap="autoPupu">{{Lang.lang('取消')}}</view>
					<view class="menu" @click="pledge">{{Lang.lang('確定')}}</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupu: false,
				select: 0,
				lang: 'en',
				langIndex: '',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				page: 0,
				num: 0,
				pledge_sf_bl_all: [],
				wallet_info: {
					yydm: 0
				},
				is_message_read: 0,
				pledge_list: [],
				pay_password:''
			}
		},
		onLoad() {

		},
		onShow() {
			this.setMenuLang();
			this.lang = uni.getStorageSync('_language');
			this.loadData()
		},
		methods: {
			loadData() {
				let that = this;
				that.page = 0;
				that.pledge_list = [];
				that.loadPageData();
			},
			loadPageData() {
				let that = this;
				that.page++;
				that.Net._post('api/pledge/pledgeIndex', {
					page: that.page
				}, res => {
					if (res.code == 200) {
						that.pledge_sf_bl_all = res.data.pledge_sf_bl_all
						that.wallet_info = res.data.wallet_info
						that.is_message_read = res.data.is_message_read
						that.pledge_list = that.pledge_list.concat(res.data.pledge_list); //将数据拼接在一起
					}
				});
			},
			autoPupu() {
				let that = this;
				that.pay_password = '';
				that.pupu = !that.pupu;
			},
			setBoxTime(e) {
				let index = e.currentTarget.dataset.index;
				this.select = index;
			},
			setMenuLang() {
				let that = this;
				uni.setTabBarItem(this.Lang.lang('indexMenu')[0]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[1]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[2]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[3]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[4]);
			},
			choiceLang: function(e) {
				let that = this;
				that.langIndex = e.target.value
				let lang = that.Lang.lang('langData')[that.langIndex].type;
				that.lang = lang;
				uni.setStorageSync('_language', lang);
				// that.setMenuLang();
				location.reload()
			},
			pledge() {
				let that = this;
				that.Net._post('api/pledge/pledge', {
					num: that.num,
					p_type: that.select,
					pay_password:that.pay_password
				}, res => {
					if (res.code == 200) {
						that.pupu = false
						that.pay_password = ''
						that.num = 0
						that.Msg.Success(res.msg)
						setTimeout(function() {
							that.loadData()
						}, 500)
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			let that = this;
			that.loadPageData()
		},
	}
</script>

<style>
	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.balance_box {
		width: 100%;
		background-color: #2A2A2A;
		padding: 4vw 5vw;
		position: relative;
		border-radius: 3vw;
		margin-bottom: 4%;
	}


	.balance_box .balance_list {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.balance_box .balance_list:nth-child(2) {
		margin-top: 3vw;
	}

	.balance_box .balance_list .title {
		font-size: 3.5vw;
		color: #fff;
		flex: 1;
		font-weight: bold;
	}

	.balance_box .balance_list .menu {
		font-size: 3.2vw;
		color: #286AF6;
		border: 1px solid #286AF6;
		height: 7vw;
		line-height: 7vw;
		padding: 0 2vw;
		border-radius: 2vw;

	}

	.balance_maxbox .balance_box:nth-child(2) .balance_list .menu {
		color: #F95657;
		border: 1px solid #F95657;
	}

	.balance_box .balance_list .num {
		font-size: 4.5vw;
		font-weight: bold;
		color: #fff;
	}

	.balance_box .balance_list .text {
		font-size: 3.4vw;
		color: #666666;
		flex: 1;
	}

	.balance_box .balance_list .time {
		width: 20%;
		height: 13vw;
		background-color: transparent;
		border-radius: 4vw;
		font-size: 3.5vw;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.timeColor {
		background-color: #0155FF !important;
	}

	.confirm02 {
		width: 100%;
		margin-top: 4vw;
	}

	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pupu_box .show_box {
		width: 70%;
		background-color: #2B2B2B;
		border-radius: 3vw;
		padding: 5vw 0 0 0;
		position: relative;
	}

	.pupu_box .show_box .title {
		width: 100%;
		text-align: center;
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.pupu_box .show_box .input {
		width: 84%;
		margin: 0 auto;
		background-color: #222222;
		border-radius: 2vw;
	}

	.pupu_box .show_box .input input {
		width: 100%;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.5vw;
		color: #fff;
		text-align: center;
	}

	.pupu_box .show_box .menu_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 5vw;
	}

	.pupu_box .show_box .menu_box .menu {
		flex: 1;
		height: 12vw;
		line-height: 12vw;
		font-size: 3.8vw;
		text-align: center;
	}

	.pupu_box .show_box .menu_box .menu:nth-child(1) {
		border-radius: 0 0 0 3vw;
		background-color: #414141;
		color: #fff;

	}

	.pupu_box .show_box .menu_box .menu:nth-child(2) {
		border-radius: 0 0 3vw 0;
		color: #fff;
		background-color: #0155FF;
	}

	.page_title {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.page_title .title {
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.page_title .arrow {
		display: flex;
		align-items: center;
		font-size: 4vw;
		color: #fff;
	}

	.records_box {
		width: 100%;
		margin-top: 4vw;
	}

	.records_box .records_list {
		width: 100%;
		background-color: #2B2B2B;
		padding: 4vw;
		position: relative;
		border-radius: 3vw;
		margin-bottom: 4vw;
	}

	.records_box .records_list .list {
		width: 100%;
		display: flex;
		align-items: center;

	}


	.records_box .records_list .list:nth-child(2) {
		margin-top: 3vw;
	}

	.records_box .records_list .list .title {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.records_box .records_list .list .title .t {
		font-size: 4vw;
		color: #fff;
	}

	.records_box .records_list .list .title .i {
		font-size: 4.5vw;
		color: #fff;
		margin-right: 2vw;
	}


	.records_box .records_list .list .time {
		font-size: 3.2vw;
		color: #919191;
	}

	.records_box .records_list .list .text {
		flex: 1;
	}

	.records_box .records_list .list .text .c {
		font-size: 3.5vw;
		color: #fff;
	}

	.records_box .records_list .list .text .c:nth-child(2) {
		margin-top: 2vw;
	}

	.records_box .records_list .list .menu {
		font-size: 3.5vw;
		background-color: #0155FF;
		height: 8vw;
		line-height: 8vw;
		border-radius: 2vw;
		padding: 0 4vw;
		color: #fff;

	}
</style>